<template>
<div class="website">
    <div class="layout">
        <!-- 菜单栏 -->
        <div class="mainmenu">
            <el-row>
                <ul>  
                    <li class="menuli"><router-link to="/userDetail"><el-avatar :src="imgurl"></el-avatar></router-link></li>
                    <li class="menuli"><router-link to="/search"><el-button icon="el-icon-search" circle></el-button></router-link></li>
                    <li class="menuli"><router-link to="/messageList"><el-button  type="primary" icon="el-icon-s-comment" circle></el-button></router-link></li>
                    <li class="menuli"><router-link to="/friendDetail"><el-button type="success" icon="el-icon-s-custom" circle></el-button></router-link></li>
                    <li class="menuli"><router-link to="/groupDetail"><el-button type="warning"  icon="el-icon-s-grid" circle></el-button></router-link></li>
                    <li class="menuli"><el-button @click="logout" type="danger" icon="el-icon-switch-button" circle></el-button></li> 
                </ul>  
            </el-row>
        </div>
            <div class=content>
                <router-view ref="childMethod"></router-view>
            </div>
    </div>
</div>

</template>

<script>
import request from "../utils/request";
export default {
 data() {
      return {
          imgurl:"",
          userid:"",
      };
    },

    created(){
        this.getUserDetail()
        this.getMyCookie()
    },

    methods: {
        //获取用户信息
        getUserDetail(){
        request.get('/user/detail').then((res)=>{
            this.imgurl=res.data.imgurl;
        })
        },


        //注销
        logout() {
            this.$socket.emit('disconnect',{userid:this.userid});
            console.log(this.userid);
            localStorage.setItem("token","");
            location.reload(); 
        },

        getMyCookie(){
              let cookieString=this.getCookie("userid");
              this.userid=parseInt(cookieString);
          },

          //获取指定cookie
          getCookie(cname){        
            var name = cname + "=";        
            var ca = document.cookie.split(';');        
            for(var i=0; i<ca.length; i++){        
                var c = ca[i].trim();        
                if(c.indexOf(name)==0) return c.substring(name.length,c.length);        
            }        
            return "";        
        },  
    }
    
}
</script>

<style>
* {
    box-sizing:border-box
}

.website{
   height: 100vh;
   width:100%;
   display: grid;
   place-items: center;
   background-image: linear-gradient(#307496,#245580);
   background-size: 100% 100%;
}

.layout{
height:650px;
width:80%;
border-radius: 40px;
box-shadow: 20px 20px 20px #110000;
display: flex;
justify-content:space-between;
}

.mainmenu{
padding-top:35px;
width:10%;
height:100%;
background-color:#2c3e50;
border-radius: 40px 0px 0px 40px;
border-right:15px solid #3c556d
}

.content{
width:90%;
height:100%;
/* background-color:#2c3e50;  */
background-image: url("/img/1000513.jpg");
background-size: cover;
border-radius: 0px 40px 40px 0px;
display: flex;
justify-content:space-between;
}

ul{
    list-style: none;
}
/* 菜单列表样式 */
.menuli{
    padding:20px;
    padding-left:30px;
}

.menuli:hover{
    background-color: #1f2c3a;
}


</style>